import { Logo } from "@/layout/icons"
import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from "@ant-design/icons"
import {
  LoginForm,
  ProConfigProvider,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
  setAlpha,
} from "@ant-design/pro-components"
import { Form, Space, Tabs, message, theme } from "antd"
import type { CSSProperties } from "react"
import React, { useState } from "react"
import { motion } from "motion/react"
import { useRequest } from "ahooks"
import { loginAlign } from "@/services"
import { encrypt } from "@/util"
import { useNavigate } from "react-router-dom"
import { BackgroundLines } from "@/motionUi/background-lines"
type LoginType = "phone" | "account"

export default () => {
  const { token } = theme.useToken()
  const [loginType, setLoginType] = useState<LoginType>("account")
  const navigate = useNavigate()
  const {
    data: userRes,
    loading,
    runAsync: runAuth,
  } = useRequest(loginAlign, {
    manual: true,
    onSuccess(data: any, params) {
      const { data: userinfo } = data
      navigate("/", { replace: true })
    },
    onError(e, params) {
      message.error("登录失败,请检查用户信息")
    },
  })

  const [form] = Form.useForm()
  const onSubmit = (value: any) => {
    const data = new FormData()
    data.append("user", encrypt(value))
    runAuth(data)
  }
  return (
    <ProConfigProvider hashed={false}>
      <BackgroundLines>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "100px",
            alignItems: "center",
          }}
        >
          <LoginForm
            //logo={<Logo></Logo>}
            title="ZhongFarewell"
            loading={loading}
            form={form}
            onFinish={onSubmit}
            subTitle="基于React的博客内容管理平台"
            //   actions={
            //     <Space>
            //       其他登录方式
            //       <AlipayCircleOutlined style={iconStyles} />
            //       <TaobaoCircleOutlined style={iconStyles} />
            //       <WeiboCircleOutlined style={iconStyles} />
            //     </Space>
            //   }
          >
            <Tabs
              centered
              activeKey={loginType}
              onChange={(activeKey) => setLoginType(activeKey as LoginType)}
            >
              <Tabs.TabPane key={"account"} tab={"账号密码登录"} />
              <Tabs.TabPane disabled key={"phone"} tab={"手机号登录"} />
            </Tabs>
            {loginType === "account" && (
              <>
                <ProFormText
                  name="username"
                  fieldProps={{
                    size: "large",
                    prefix: <UserOutlined className={"prefixIcon"} />,
                  }}
                  placeholder={"用户名"}
                  rules={[
                    {
                      required: true,
                      message: "请输入用户名!",
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: "large",
                    prefix: <LockOutlined className={"prefixIcon"} />,
                    strengthText:
                      "Password should contain numbers, letters and special characters, at least 8 characters long.",
                    statusRender: (value) => {
                      const getStatus = () => {
                        if (value && value.length > 12) {
                          return "ok"
                        }
                        if (value && value.length > 6) {
                          return "pass"
                        }
                        return "poor"
                      }
                      const status = getStatus()
                      if (status === "pass") {
                        return (
                          <div style={{ color: token.colorWarning }}>
                            强度：中
                          </div>
                        )
                      }
                      if (status === "ok") {
                        return (
                          <div style={{ color: token.colorSuccess }}>
                            强度：强
                          </div>
                        )
                      }
                      return (
                        <div style={{ color: token.colorError }}>强度：弱</div>
                      )
                    },
                  }}
                  placeholder={"密码"}
                  rules={[
                    {
                      required: true,
                      message: "请输入密码！",
                    },
                  ]}
                />
              </>
            )}
            {loginType === "phone" && (
              <>
                <ProFormText
                  fieldProps={{
                    size: "large",
                    prefix: <MobileOutlined className={"prefixIcon"} />,
                  }}
                  name="mobile"
                  placeholder={"手机号"}
                  rules={[
                    {
                      required: true,
                      message: "请输入手机号！",
                    },
                    {
                      pattern: /^1\d{10}$/,
                      message: "手机号格式错误！",
                    },
                  ]}
                />
                <ProFormCaptcha
                  fieldProps={{
                    size: "large",
                    prefix: <LockOutlined className={"prefixIcon"} />,
                  }}
                  captchaProps={{
                    size: "large",
                  }}
                  placeholder={"请输入验证码"}
                  captchaTextRender={(timing, count) => {
                    if (timing) {
                      return `${count} ${"获取验证码"}`
                    }
                    return "获取验证码"
                  }}
                  name="captcha"
                  rules={[
                    {
                      required: true,
                      message: "请输入验证码！",
                    },
                  ]}
                  onGetCaptcha={async () => {
                    message.success("获取验证码成功！验证码为：1234")
                  }}
                />
              </>
            )}
            <div
              style={{
                marginBlockEnd: 24,
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                自动登录
              </ProFormCheckbox>
              <a
                style={{
                  float: "right",
                }}
              >
                忘记密码
              </a>
            </div>
          </LoginForm>
        </div>
      </BackgroundLines>
    </ProConfigProvider>
  )
}
